<template>
  <div class="user">
  <van-popup v-model="show">
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </van-popup>

    <div class="top">
      <img :src="headImg" alt="">
      <h3 @click="showPopup">
        <p v-if="islogined">{{username}}</p>
        <p v-else>点击登录</p>
      </h3>
      <van-icon @click="logFn" :name="islogined ? 'cross' : 'arrow'" />
    </div>
    <van-grid column-num='3'>
      <van-grid-item v-for="item in gridArr" :key='item.id' :icon="item.icon" :text="item.type" />
    </van-grid>
  </div>
</template>

<script>
// 引入请求
import { register } from "@/https/http";
import headIm from '../assets/images/touxiang.png'
export default {
    data(){
      return{
        name:'点击登录',
        show: false,//是否显示遮罩层
        username:'',//用户名
        password: '',//密码
        islogined:false,//当前登录状态
        headImg:headIm,//登录头像
        gridArr: [
        // grid数组
        { id: 0, icon: "label-o", type: "我的订单" },
        { id: 1, icon: "bill-o", type: "优惠券" },
        { id: 2, icon: "goods-collect-o", type: "礼品卡" },
        { id: 3, icon: "location-o", type: "我的收藏" },
        { id: 4, icon: "flag-o", type: "我的足迹" },
        { id: 5, icon: "contact", type: "会员福利" },
        { id: 6, icon: "aim", type: "地址管理" },
        { id: 7, icon: "warn-o", type: "账号安全" },
        { id: 8, icon: "service-o", type: "联系客服" },
        { id: 9, icon: "question-o", type: "帮助中心" },
        { id: 10, icon: "smile-comment-o", type: "意见反馈" },
      ],
      }
    },
    mounted(){
      this.login()
    },
    methods:{
      // 显示遮罩层
      showPopup() {
        if(!this.islogined){
          this.show = true;
        }
      },
      // 退出登录
      logout(){
        this.$dialog.confirm({
            title: '退出登录',
            message: '确认是否退出',
          })
            .then(() => {
              localStorage.removeItem("userInfo");
              localStorage.removeItem("token");
              this.islogined = false;
              this.$router.go(0);
              this.headImg = headIm
            })
            .catch(() => {
            });
      },
      logFn(){
        if(localStorage.getItem('token')){
          this.logout()
        }else{
          this.showPopup()
        }
      },
      // 登录验证
      login(){
        if(localStorage.getItem('token')){
          this.username = JSON.parse(localStorage.getItem('userInfo')).username
          this.islogined = true
          this.headImg = JSON.parse(localStorage.getItem('userInfo')).avatar
        }else{
          this.islogined = false
        }
      },
      // 登录请求
      onSubmit() {
        register({username:this.username,pwd:this.password}).then(res=>{
          localStorage.setItem('token',res.data.data.token)
          localStorage.setItem('userInfo',JSON.stringify(res.data.data.userInfo))
          this.show = false;
          this.headImg = res.data.data.userInfo.avatar;
          this.username = res.data.data.userInfo.username;
          this.islogined = true
          this.headImg = res.data.data.userInfo.avatar
          console.log(this.headImg);
        })
      },
    }
}
</script>

<style scoped lang = 'less'>
  .top{
    height: 100px;
    background-color: #333333;
    display: flex;
    justify-content: space-between;
    padding: 10px ;
    color: white;
    img{
      border-radius: 50%;
    }
    h3{
      line-height: 100px;
      color: white;
      display: flex;
      justify-content: space-between;
      width: 100%;
      p{
        margin-left: 10px;
      }
    }
    .van-icon-arrow,.van-icon-cross{
      display: flex;
      align-items: center;
    }
  }
  .van-popup,{
    width: 80%;
    height: 200px;
    border-radius: 20px;
  }
</style>